<template>
    <div class="heading">
        <div class="title">
            <h1>城市介绍</h1>
        </div>
    </div>
    <section class="container" id="posts">
        <div class="post-container">
            <citydetail :cityContent="cityContent" :cityName="cityName" :viewCount="viewCount">
            </citydetail>
        </div>
        <div class="sidebar">
            <recommendCity :recommendValue="recommendValue"></recommendCity>
        </div>
    </section>
</template>

<script setup>
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import { getCityDetailAPI, recommendCityAPI } from '@/api'
import citydetail from '@/components/City/citydetail.vue';
import recommendCity from '@/components/City/recommendCity.vue';

const route = useRoute()
const viewCount = ref()
const cityName = ref()
const cityContent = ref();
const cityId = ref()
const recommendValue = ref()
const initcitydetail = async () => {
    const res = await getCityDetailAPI(cityId.value)
    cityContent.value = res.content
    cityName.value = res.cityName
    viewCount.value = res.viewCount
}
const recommendcity = async () => {
    const res = await recommendCityAPI()
    recommendValue.value = res
}
recommendcity()
watch(
    () => route.query.cityId,
    () => {
        cityId.value = route.query.cityId
        initcitydetail()
    }, { deep: true, immediate: true })
</script>

<style lang="scss" scoped>
.heading {
    min-height: 50vh;
    background-size: cover;
    background-position: center;
    display: grid;
    place-items: center;
    background: url("@/assets/image/header-bg-1.png") no-repeat;
}

.heading .title {
    text-align: center;
    align-items: center;
    font-size: 2rem;
    color: #fff;
    word-break: break-all;
}

section {
    padding: 2rem 9%;
}

.post-container {
    border-radius: 1rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
    border: #eee solid .1rem;
    padding: 2rem;
}

.container {
    display: grid;
    grid-template-columns: 2.5fr 1fr;
    gap: 2.5rem;
    background-color: #fff;
}

@media (max-width:1200px) {
    section {
        padding: 2rem;
    }
}

@media (max-width:991px) {
    .container {
        grid-template-columns: 2fr 1fr;
    }
}

@media (max-width:768px) {
    .container {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    section {
        padding: 2rem;
    }
}
</style>